<template>
	<view class="content align-center">
		
		<view class="login">
			<view class="login_logo flex justify-center ">
				<image class="login_logo--image" src="../../static/img/hicLogo.png"></image>
			</view>
			
			<view class="input-group">
				<view class="input-row border">
					<m-input class="m-input" type="text" clearable v-model="account" placeholder="请输入工号">
						
					</m-input>
				</view>
				<view class="input-row">
					<m-input type="password" displayable v-model="password" placeholder="请输入密码">
						
					</m-input>
				</view>
			</view>
			
			<view class="btn-row">
				<button class="cu-btn block bg-blue margin-tb-sm lg" @tap="bindLogin">
					<text class="cuIconfont-spin"></text>
					登录
				</button>
			</view>
			
		</view>
	</view>
</template>

<script>
import mInput from '@/components/m-input.vue';
import { showToast } from '@/utils/util.js';
export default {
	components: {
		mInput
	},
	data() {
		return {
			account: 'ADMIN',
			password: 'password',
			positionTop: 0
		};
	},
	methods: {
		initPosition() {
			this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
			
		},
		bindLogin() {
			// 验证输入框
			// if(!this.verify()) return
			const params = {
				username: this.account,
				password: this.password
			};
			this.$store.dispatch('user/login', params);
		},
		verify() {
			if (this.account && this.password) return true;
			showToast({ title: '工号和密码不能为空！' });
			return false;
		}
	},
	onReady() {
		this.initPosition();
	}
};
</script>

<style lang="scss">
.login {
	width: 80%;
	&_logo {
		margin: 80px 0 40px 0;
		&--image {
			height: 60px;
			width: 200px;
		}
	}
}
</style>
